import React, { useState } from 'react'
import { View, Text, Input, Image, Textarea } from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import './index.scss';
interface MessageItem {
  id: number
  avatar: string
  name: string
  content: string
  time: string
  reply?: string
  tag?: string
  productImg: string
}

const messages: MessageItem[] = [
  {
    id: 1,
    avatar: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    name: '国鉴大师',
    content: '这小酒还挺好喝',
    time: '02-22',
    productImg: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
  },
  {
    id: 2,
    avatar: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    name: '国鉴大师',
    content: '一看就是行家',
    reply: '这小酒还挺好喝',
    time: '02-22',
    tag: '作者',
    productImg: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
  },
  {
    id: 3,
    avatar: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    name: '国鉴大师',
    content: '这小酒还挺好喝',
    time: '02-22',
    productImg: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
  }
]
const Page = () => {

  return (
    <PageWrapper title="互动消息" showBack={true} backgroundColor='#F0F0F0'>
      <View className="message-list">
        {messages.map(item => (
          <View className="message-card" key={item.id}>
            <View className="left">
              <Image className="avatar" src={item.avatar} />
            </View>
            <View className="center">
              <View className="name-row">
                <Text className="name">{item.name}</Text>
                {item.tag && <Text className="tag">{item.tag}</Text>}
              </View>
              <View className="meta">
                <Text className="action">{item.reply ? '回复了你的评论' : '评论了你的内容'}</Text>
                <Text className="time">{item.time}</Text>
              </View>
              <Text className="content">{item.content}</Text>
              {item.reply && <View className="reply">{item.reply}</View>}

              {/* 底部操作按钮 */}
              <View className="actions">
                <View className="btn">
                  <Image className="btn-img" src={require('../../assets/video/comment3.png')}></Image>
                  回复评论
                </View>
                <View className="like-box">
                  <Image className="like" src={require('../../assets/video/hearts-line.png')}></Image>
                </View>
              </View>
            </View>
            <Image className="product-img" src={item.productImg} ></Image>
          </View>
        ))}
      </View>
    </PageWrapper>
  )
}

export default Page
